<template>
  <div class="w-100 h-100 flex-vertical">
    <Back class="flex-header mt-5" />
    <div class="w-100 flex-header flex-center-center px-4">
      <div class="w-100 input-box flex-center-center bg-white px-3">
        <svg t="1683727161430" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11706" width="2rem" height="2rem">
          <path
            d="M469.333333 768c-166.4 0-298.666667-132.266667-298.666666-298.666667s132.266667-298.666667 298.666666-298.666666 298.666667 132.266667 298.666667 298.666666-132.266667 298.666667-298.666667 298.666667z m0-85.333333c119.466667 0 213.333333-93.866667 213.333334-213.333334s-93.866667-213.333333-213.333334-213.333333-213.333333 93.866667-213.333333 213.333333 93.866667 213.333333 213.333333 213.333334z m251.733334 0l119.466666 119.466666-59.733333 59.733334-119.466667-119.466667 59.733334-59.733333z"
            fill="#444444"
            p-id="11707"
          ></path>
        </svg>
        <div class="text-plus">搜索你感兴趣的内容</div>
      </div>
    </div>
    <div class="flex-header px-4 my-3">{{ list.length }}条搜索结果</div>
    <div class="flex-content px-4 pb-4 no-scroll">
      <div v-for="(item, index) in list" :key="index" class="mb-4">
        <div class="w-100 tab-box flex-item align-items-center round-md bg-white p-3">
          <div class="flex-content">
            <div class="d-flex align-items-center">
              <div>{{ item.name }}</div>
            </div>
            <div class="d-flex align-items-center my-1">
              <svg t="1683727800743" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12717" width="2rem" height="2rem">
                <path
                  d="M511.744 68.266667c-173.5168 0-314.026667 136.311467-314.7776 305.937066 0 60.910933 18.1248 118.903467 51.7632 168.465067l3.293867 4.693333 1.911466 3.1744 1.570134 2.389334c1.058133 1.553067 2.184533 3.037867 3.447466 4.5056l0.785067 0.853333 200.174933 232.823467a68.266667 68.266667 0 0 0 103.645867-0.170667L762.641067 558.08l-1.314134 1.450667a50.346667 50.346667 0 0 0 5.341867-6.621867l1.536-2.3552c0.631467-0.989867 1.860267-3.072 1.826133-3.003733 35.293867-49.322667 55.0912-109.431467 55.825067-172.782934C825.856 204.9536 684.970667 68.266667 511.744 68.266667z m0 68.266666c135.970133 0 245.845333 106.5984 245.845333 237.824a235.400533 235.400533 0 0 1-43.9808 134.775467l-2.952533 4.676267-198.997333 232.789333-200.192-232.823467-1.928534-3.191466-0.989866-1.450667a230.229333 230.229333 0 0 1-43.3152-134.775467C265.8304 242.858667 375.415467 136.533333 511.744 136.533333z"
                  fill="#444444"
                  p-id="12718"
                ></path>
                <path
                  d="M783.803733 714.734933a34.133333 34.133333 0 0 1 45.243734 10.018134l1.4336 2.2528 73.386666 125.730133a68.266667 68.266667 0 0 1-54.784 102.5536l-4.5568 0.119467-666.043733-3.6352a68.266667 68.266667 0 0 1-60.654933-98.850134l2.133333-3.9424 69.9392-119.261866a34.133333 34.133333 0 0 1 60.16 32.170666l-1.262933 2.3552-69.9392 119.261867 666.043733 3.6352-73.386667-125.730133a34.133333 34.133333 0 0 1 12.288-46.677334z"
                  fill="#444444"
                  p-id="12719"
                ></path>
                <path d="M512 243.950933a136.533333 136.533333 0 1 0 0.034133 273.1008A136.533333 136.533333 0 0 0 512 243.950933z m0 68.266667a68.266667 68.266667 0 1 1-0.034133 136.567467A68.266667 68.266667 0 0 1 512 312.2176z" fill="#00B386" p-id="12720"></path>
              </svg>
              <div>{{ item.location }}</div>
            </div>
            <div class="d-flex align-items-center">
              <div>
                {{ item.tel }}
              </div>
            </div>
          </div>
          <div class="flex-label">
            <img :src="item.img" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Back from '@components/Back.vue';
import { ref } from 'vue';

const list = ref([
  {
    name: '版本尔德宠物医院',
    location: '哈哈哈广场旁边',
    tel: '124-2203-2222',
    img: require('@img/search/1.png')
  },
  {
    name: '上海兽医医院',
    location: '上海松江区168号',
    tel: '124-6663-8888',
    img: require('@img/search/2.png')
  },
  {
    name: '知名宠物医院',
    location: '哈哈哈广场旁边',
    tel: '166-5555-4455',
    img: require('@img/search/3.png')
  },
  {
    name: '恒爱医院',
    location: '哈哈哈广场旁边',
    tel: '168-2203-2222',
    img: require('@img/search/4.png')
  }
]);
</script>

<style lang="less" scoped>
@import '~@style/variable.less';
.input-box {
  height: 3.8rem;
  line-height: 3.8rem;
  border-radius: 3.8rem;
  border: 1px solid #fa7115;
  img {
    width: 3rem;
  }
}
.tab-box {
  box-shadow: 0 0 1.2rem rgba(0, 0, 0, 0.1);
  img {
    height: 4rem;
  }
}
</style>
